<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <button @click="handleClick">动态创建div</button>
        <div v-if="isCreated">动态创建和删除---true</div>
        <div v-else>动态创建和删除---false</div>

        <hr>
        <ul v-if="datalist.length">
            <li v-for="data in datalist">{{data}}</li>
        </ul>
        <div v-else>购物车空空如也</div>

        <hr>
        <div v-if="which==1">1111</div>
        <div v-else-if="which==2">2222</div>
        <div v-else>3333</div>
    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                isCreated: false,
                datalist: [],
                which: 1
            },
            methods: {
                handleClick() {
                    this.isCreated = !this.isCreated
                    this.datalist = ['1111', '2222', '3333']
                    this.which = 2
                }
            }
        })
    </script>

</body>

</html>